<template>
	<view>
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
		  <swiper-item v-for="(item, i) in works_info.pics" :key="i">
				<!-- 把当前点击的图片的索引，传递到 preview() 处理函数中 -->
		    <image :src="item.pics_big" @click="preview(i)"></image>
		  </swiper-item>
		</swiper>
		
		<!-- 作业信息区域 -->
		<view class="works-info-box">
		  <!-- 信息主体区域 -->
		  <view class="works-info-body">
		    <!-- 作业信息 -->
		    <view class="works-name">{{works_info.goods_name}}</view>
		    <!-- 奖励 -->
		    <view class="favi" v-if="showFlower">
		      <image src="../../static/flower.png" mode=""></image>
		    </view>
		  </view>
			
		  <!-- 上传 -->
			<!-- <view class="uni-file-picker" v-if="showPicker"> -->
			<view class="uni-file-picker" v-if="showPicker">
				<uni-file-picker
					class="uni-file-picker"
					v-model="imageValue"
					fileMediatype="image" 
					mode="grid" 
					@select="select" 
					@progress="progress" 
					@success="success" 
					@fail="fail" 
					:image-styles="imageStyles"
				>
					<button>选择文件</button>
				</uni-file-picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 定义 props 属性，用来接收外界传递到当前组件的数据
		props: {
			// 是否展示 uni-file-picker
			showPicker: {
				type: Boolean,
				// 如果外界没有指定 show-picker 属性的值，则默认不展示 uni-file-picker 组件
				default: false,
			},
			showFlower: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				// 作业信息
				works_info: {},
				// 上传框样式
				imageStyles:{
					width: 117,
					height: 50,
					border:{
						color:"#ff5a5f",
						width:3,
						radius:'8px'
					}
				}
			};
		},
		onLoad(options) {
		  // 获取商品 Id
		  const goods_id = options.goods_id
		  // 调用请求商品详情数据的方法
		  this.getGoodsDetail(goods_id)
		},
		methods: {
		  // 定义请求商品详情数据的方法
		  async getGoodsDetail(goods_id) {
		    const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
		    if (res.meta.status !== 200) return uni.$showMsg()
				console.log(res)
		    // 为 data 中的数据赋值
		    this.works_info = res.message
		  },
			// 实现轮播图的预览效果
			preview(i) {
			  // 调用 uni.previewImage() 方法预览图片
			  uni.previewImage({
			    // 预览时，默认显示图片的索引
			    current: i,
			    // 所有图片 url 地址的数组
			    urls: this.works_info.pics.map(x => x.pics_big)
			  })
			},
			// 获取上传状态
			select(e){
				console.log('选择文件：',e)
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
			},
			
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			}
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.uni-file-picker {
		width: 240rpx;
		margin: 0 auto;
	}
	.favi image {
		width: 100rpx;
		height: 100rpx;
	}
</style>
